<template>
  <div class="main">
    <div style="display: flex;flex-direction: row;justify-content: flex-start">
      <div style=" background-color:black;margin-bottom:50px">
        <video id="demo"
          ref="video"
          src=""
          width="600px"
          height="350px"
        >
        </video>
      </div>
      <div style="display: flex;flex-direction: column;justify-content: flex-start; margin-left:150px">
          <div class="little_box">
            <div class="left_box">
              <h2>到寝人数</h2>
              <h2>3</h2>
            </div>
            <div class="right_box">
              <h2 style="color:red">缺勤</h2>
              <h2>1</h2>
            </div>
          </div>
          <div class="little_box">
            <div class="left_box">
              <h2>关锁状态</h2>
              <h2>{{status?"关闭":"打开"}}</h2>
            </div>
            <div class="right_box">
              <el-switch style="margin-top: 10px"  v-model="status"></el-switch>
            </div>
          </div>
        </div>
    </div>
    <!-- 第二行 -->
    <div style="display: flex;flex-direction: row;justify-content: flex-start">
      <htinfo/>
      <div style="width: 600px;height: 200px;">
        <droom></droom>
      </div>
    </div>
  </div>
</template>

<script>
import htinfo from "../components/htinfo";
import droom from "../components/droom.vue";
export default {
  name: "myvideo",
  components: {
    htinfo,
    droom,
  },
  data(){
    return{
      status:true
    }
  },
  created(){
    this.callCamera();
  },
  methods:{
    callCamera(){
      navigator.mediaDevices
      .getUserMedia({
        video: true,
      })
      .then((res) => {
        this.$refs['video'].srcObject = res;
        this.$refs['video'].play();
      })
      .catch(() => {
        console.log("error");
      });
    }
  }
}
</script>

<style scoped>
.main{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background:url("../assets/contentback.png");
  height:100%;
  background-size:100% 100%;
}
.little_box{
  height: 160px;
  width: 250px;
  background: rgb(1, 67, 121);
  margin: 10px;
  border: 3px rgb(8, 132, 233) solid;
  display: flex;
  flex-direction: row;
  color: rgb(8, 132, 233);
}
.left_box{
  width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.right_box{
  width: 97px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: 3px rgb(8, 132, 233) solid;;
}
</style>
